<template>
  <div class="phang-box">
    <!-- 官方榜 -->
    <div class="phang-one flex">
      <div>官方榜</div>
      <div></div>
    </div>
    <!-- 官方榜list -->
    <div class="list-top flex-one">
     <PhangCard :Cards='biaoShengData' class="CardClass"></PhangCard>
     <PhangCard :Cards='newSongData' class="CardClass"></PhangCard>
     <PhangCard :Cards='originalData' class="CardClass"></PhangCard>
     <PhangCard :Cards='hotSongData' class="CardClass"></PhangCard>
     <PhangCard :Cards='rapSongData' class="CardClass"></PhangCard>
     <PhangCard :Cards='likeSongData' class="CardClass"></PhangCard>
    </div>

    <!-- 全球榜 -->
    <div class="phang-one flex">
      <div>全球榜</div>
      <div></div>
    </div>
    <!-- 全球榜：获取数据渲染  写样式 -->
    <div class="listMusic flex-one">
      <div class="item" v-for="(item, index) in globalData" :key="index">
        <div class="item-top">
          <div class="play-num">
            <i class="el-icon-service">{{
              item.playCount >= 10000
                ? Math.round(item.playCount / 10000) + "万"
                : item.playCount
            }}</i>
          </div>
          <img :src="item.coverImgUrl" alt="" />
          <div class="playMusic"><i class="el-icon-video-play"></i></div>
        </div>
        <div class="text-one">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getphangDate} from '@/network/phang'
import PhangCard from '@/components/phangCard'

export default {
  data() {
    return {
      globalData: [],
      biaoShengData:{},
      newSongData:{},
      originalData:{},
      hotSongData:{},
      rapSongData:{},
      likeSongData:{}
    };
  },
  created() {
    this.getglobalm();
  },
  //榜单中的子组件
  components:{
    PhangCard
  },
  methods: {
    getglobalm() {
      getphangDate("/toplist").then(res=> {
        this.globalData = res.list
        this.biaoShengData = res.list[0]//获取飙升榜数据
        this.newSongData = res.list[1]
        this.originalData = res.list[2]
        this.hotSongData = res.list[3]
        this.rapSongData = res.list[4]
        this.likeSongData = res.list[5]
      });
    },
  },
};
</script>

<style scoped lang='less'>
.phang-box {
  .phang-one {
    border-bottom: 2px solid blue;
    padding-bottom: 5px;
    font-size: 20px;
    font-style: italic;
    color: rgb(68, 15, 167);
  }
  .list-top{
      padding-top:16px;
      .CardClass{
          margin:5px 2px;
      }
  }
  //
  .listMusic {
    margin-top: 25px;
    .item {
      height: 200px;
      width: 150px;
      overflow: hidden;
      margin-right: 14px;
      .item-top {
        height: 150px;
        width: 150px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        .play-num {
          position: absolute;
          right: 0;
          width: 70px;
          height: 15px;
          font-size: 8px;
          background: rgba(19, 18, 18, 0.5);
          color: #fff;
          text-align: center;
        }
        img {
          width: 100%;
          height: 100%;
        }
        .playMusic {
          position: absolute;
          right: -5px;
          bottom: 0px;
          width: 50px;
          height: 50px;
          transform: translateX(100%);
          transition: transform 0.4s;
          border-radius: 50%;
          font-size: 35px;
          color: red;
        }
      }
    }
    .item:hover .playMusic {
      transform: translateX(0);
    }
  }
}
</style>